<template>
  <a-modal v-model:open="modelVisible"
           :mask="true"
           :width="width"
           :footer="null"
           :wrapClassName="wrapClassName"
           :title="modalTitle">
    <ChatMessage :placeholder="placeholder" :deep-seek="deepSeek">
      <template #addressBook v-if="$slots['addressBook']">
        <slot name="addressBook"></slot>
      </template>
    </ChatMessage>
  </a-modal>
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
import ChatMessage from "./ChatMessage.vue";

const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  icon: {
    type: String,
    default: ""
  },
  visible: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: "50%"
  },
  wrapClassName: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: "50%"
  },
  placeholder: {
    type: String,
    default: '请输入内容'
  },
  sendUserName: {
    type: String,
    default: '测试'
  },
  reviewUserName: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  deepSeek: {
    type: Object,
    default: {
      basicUrl: '',
      headers: {},
      params: {},
      method: 'post',
      queryKey: 'query',
      askKey: 'answer',
      markdown: false
    }
  },
  sendEvent: {
    type: Function,
    default: (v: string) => {
      console.log(v)
    }
  }
})

const modelVisible = ref()
const modalTitle = ref(props.title)
const modalIcon = ref(props.icon)

const emit = defineEmits(['update:visible'])

watch(() => props.visible, (newValue) => {
  modelVisible.value = newValue
})

watch(() => modelVisible.value, (newValue) => {
  emit('update:visible', newValue)
})
const open = (params: any) => {
  modelVisible.value = true
  if (params.title) {
    modalTitle.value = params.title
  }
  if (params.icon) {
    modalIcon.value = params.icon
  }
}
defineExpose({open})
</script>
<style scoped>

</style>